<template>
	<view class="classify">
		<nav-bar :hideBack="true" title="分类与搜索"></nav-bar>
		<view class="top-search-box cu-flex-center">
			<view class="search-item">
				<view class="search-options cu-flex-center">
					<text class="search-options-text">搜索</text>
				</view>
				<view class="search-options-line"></view>
				<input class="input-self" confirmType="search"  placeholder="输入关键字搜索" type="text" :value="tag"></input>
				<view class="search-options-line"></view>
				<view class="search-options cu-flex-center">
					<image class="search-icon" mode="aspectFit" src="/static/icons/search.png"></image>
				</view>
			</view>
		</view>
		<view class="top-fill" style="height:88rpx;"></view>
		<view class="classify-title-box">
			<text class="classify-title">比例分类</text>
		</view>
		<view class="ratio-box">
			<view class="ratio-box-left">
				<view class="pc-box">
					<view class="classify-item-name-box cu-flex-center">电脑</view>
				</view>
				<view class="pad-box">
					<view class="classify-item-name-box cu-flex-center">平板</view>
				</view>
			</view>
			<view class="ratio-box-right">
				<view class="classify-item-name-box cu-flex-center">手机</view>
			</view>
		</view>
		<view class="classify-title-box">
			<text class="classify-title">颜色分类</text>
		</view>
		<view class="classify-color-box">
			<view class="classify-color-item cu-flex-center"  v-for="(item,index) in colorList" :key="index">
				<image class="classify-color-image" mode="aspectFill" :src="item.image"></image>
			</view>
		</view>
		<view class="classify-title-box">
			<text class="classify-title">壁纸分类</text>
		</view>
		<view class="classify-box">
			<view class="classify-item" :style="{backgroundImage:`url(${item.image})`}" v-for="(item,index) in classifyList" :key="index">
				<view class="classify-item-name-box cu-flex-center">{{item.name}}</view>
			</view>
		</view>
		<cu-end-empty></cu-end-empty>
	</view>
</template>

<script>
	import navBar from '../../components/nav-bar/nav-bar.vue'
	export default {
		data() {
			return {
				tag:"",
				colorList:[],
				classifyList:[],
				isLoader:0
			}
		},
		created:function(){
			
		},
		methods: {
			
		},
		props: {
			display: {
				type: Number,
				default: ""
			},
		},
		watch:{
			display:function(val){
				if(val == 1){
					console.log("classIfyDisplay",'watch')
					if(!this.isLoader){
						uni.request({
							url: this.$globals.siteUrl+'/fl.php', //仅为示例，并非真实接口地址。
							success: (res) => {
								console.log("request success");
								console.log(res.data);
								let date = res.data
								let that = this
								if(date.success){
									let color = [];
									let classifyList = [];
									date.data.data.forEach(function(val,key){
										if(val.isColor){
											color.push(val)
										}else{
											classifyList.push(val)
										}
									})
									that.colorList = color
									that.classifyList = classifyList
								}
							}
						});
						this.isLoader = 1
					}
					
					uni.$emit('updateSwiperHeight',{'isTimes':true})
					/* end */
				}
			}
		}
	}
</script>

<style scoped>
.top-search-box {
    width: 750rpx;
    height: 88rpx;
    background-color: rgba(20,20,20,.8);
    backdrop-filter: blur(10px);
    position: fixed;
    z-index: 999;
}

.search-item {
    width: 690rpx;
    height: 76rpx;
    background: hsla(0,0%,100%,.06);
    border-radius: 44rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.search-options {
    width: 100rpx;
    height: 76rpx;
}

.search-options-text {
    color: hsla(0,0%,66.7%,.65);
    font-size: 26rpx;
}

.search-options-line {
    width: 1px;
    height: 28rpx;
    background-color: hsla(0,0%,43.9%,.25);
}

.search-icon {
    width: 44rpx;
    height: 44rpx;
    opacity: .65;
}

.input-self {
    height: 76rpx;
    -webkit-box-flex: 1;
    flex: 1;
    font-size: 26rpx;
    color: #fff;
    padding-left: 20rpx;
    padding-right: 20rpx;
}

.classify-title {
    font-size: 44rpx;
    color: #fff;
    font-family: titleFont;
}

.classify-title-box {
    width: 750rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin-top: 50rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.classify-color-box {
    display: flex;
    flex-wrap: wrap;
}

.classify-color-item {
    width: 150rpx;
    height: 90rpx;
    margin-top: 40rpx;
}

.classify-color-image {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
}

.classify-right-option {
    width: 194rpx;
    height: 66rpx;
    background: hsla(0,0%,100%,.08);
    border-radius: 40rpx;
}

.classify-right-option-icon {
    width: 32rpx;
    height: 32rpx;
}

.classify-right-option-text {
    font-size: 26rpx;
    color: #bfbfbf;
    margin-left: 10rpx;
}

.classify-box {
    width: 750rpx;
    padding: 30rpx;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.classify-item {
    width: 335rpx;
    height: 195rpx;
    border-radius: 6rpx;
    background-color: #000;
    margin-bottom: 20rpx;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    align-items: flex-end;
}

.classify-item-name-box {
    height: 44rpx;
    min-width: 142rpx;
    border-radius: 44rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;
    background-color: hsla(0,0%,63.5%,.3);
    backdrop-filter: blur(10px);
    margin-bottom: 10rpx;
    font-size: 24rpx;
    color: #fff;
}

.ratio-box {
    width: 750rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin-top: 40rpx;
}

.ratio-box-left,.ratio-box {
    height: 544rpx;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.ratio-box-left {
    width: 330rpx;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.pc-box {
    height: 194rpx;
    background-image: url(https://wallpaper.senlinjimore.com/images/pc.jpg);
}

.pad-box,.pc-box {
    width: 330rpx;
    border-radius: 12rpx;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    align-items: flex-end;
}

.pad-box {
    height: 330rpx;
    background-image: url(https://wallpaper.senlinjimore.com/images/pad.jpg);
}

.ratio-box-right {
    width: 330rpx;
    height: 544rpx;
    background-image: url(https://wallpaper.senlinjimore.com/images/phone.jpg);
    border-radius: 12rpx;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    align-items: flex-end;
}
</style>
